<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框制作</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="plugins/common.css"/>
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
</head>
<body>
<div class="cont" id="app">
    <div class="search">
        <el-select v-model="value" filterable placeholder="课程">
            <el-option-group
                    v-for="group in options"
                    :key="group.label"
                    :label="group.label">
                <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-option-group>
        </el-select>
        <span><img   src="img/search.png" v-on:click="myclick()"></span>
    </div>

    <el-carousel indicator-position="outside"
                 id="img"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
                 :data="tableData"
                 style="width: 100%"
                 height="500px"
    >
        <el-carousel-item v-for="item in tableData" :key="item">
            <img :src="`img/${item}`"   class="rightImg" width="100%" height="100%">
        </el-carousel-item>
    </el-carousel>




</div>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="plugins/element-ui/index.js"></script>
<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                options: [{
                    label: '热门搜索',
                    options: [{
                        value: 'Java',
                        label: 'Java'
                    }, {
                        value: 'JavaWeb',
                        label: 'JavaWeb'
                    },{
                        value: 'PHP',
                        label: 'PHP'
                    },{
                        value: 'Android',
                        label: 'Android'
                    }]
                }],
                value: '',
                loading: false,
                tableData:['1.jpg','2.webp','3.webp','4.webp','5.jpg']
            }
        },
        methods:{
            myclick() {
                this.loading=true;
            }

        }

    })
</script>
</body>
</html>